<template>
  <div class="gallery-container">
    <!-- 顶部导航栏 -->
    <el-header class="app-header">
      <div class="logo">
        <img src="@/assets/logo.png" alt="Logo" class="logo-image">
      </div>
    </el-header>

    <!-- 主要内容区域 -->
    <el-main class="main-content">
      <!-- 返回按钮 -->
      <div class="nav-bar">
        <div
            v-if="!selectedCategory && !selectedItem && !selectedFeature"
        >
        </div>
        <el-button
            v-else-if="selectedCategory && !selectedItem && !selectedFeature"
            @click="backToCategories"
            class="back-btn"
            type="primary"
            plain
        >
          <el-icon><ArrowLeft /></el-icon>
          <span>返回分类</span>
        </el-button>
        <el-button
            v-else-if="selectedItem && !selectedFeature"
            @click="backToCategoryDetail"
            class="back-btn"
            type="primary"
            plain
        >
          <el-icon><ArrowLeft /></el-icon>
          <span>返回植物列表</span>
        </el-button>
        <el-button
            v-else
            @click="backToFeatures"
            class="back-btn"
            type="primary"
            plain
        >
          <el-icon><ArrowLeft /></el-icon>
          <span>返回生长时期</span>
        </el-button>
      </div>

      <!-- 主页面内容 -->
      <div v-if="!selectedCategory && !selectedItem && !selectedFeature">
        <!-- 标题和说明 -->
        <div class="header-section">
          <h1 class="title">植物图鉴</h1>
          <p class="description">探索丰富的植物世界，了解各类植物的特征和生长过程</p>
        </div>

        <!-- 分类标题 -->
        <h2 class="category-title">植物分类</h2>

        <!-- 分类按钮网格 -->
        <el-row :gutter="20" class="category-grid">
          <el-col
              v-for="(category, index) in categories"
              :key="category.id"
              :xs="12" :sm="8" :md="6" :lg="4"
          >
            <el-card
                shadow="hover"
                class="category-card"
                :class="`category-card-${index % 6}`"
                @click="selectCategory(category)"
            >
              <div class="category-content">
                <div class="category-icon">
                  <el-icon :size="40"><Collection /></el-icon>
                </div>
                <h3>{{ category.category_name }}</h3>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 分类详情页面 -->
      <div v-else-if="selectedCategory && !selectedItem && !selectedFeature" class="category-detail">
        <div class="header-section">
          <el-tag type="success" effect="plain" class="category-tag">{{ selectedCategory.category_name }}</el-tag>
          <h1 class="title">植物种类</h1>
          <p class="description">该分类下的所有植物种类</p>
        </div>

        <!-- 植物种类网格 -->
        <el-row :gutter="20" class="items-grid">
          <el-col
              v-for="(plant,index) in plantTypes"
              :key="plant.plant_type_id"
              :xs="12" :sm="8" :md="6" :lg="4"
          >
            <el-card
                shadow="hover"
                class="item-card"
                :class="`item-card-${index % 6}`"
                @click="selectItem(plant)"
            >
              <div class="plant-content">
                <div class="plant-icon">
                  <el-icon :size="40"><Grape /></el-icon>
                </div>
                <div class="plant-text">
                  <h3>{{ getBracketsContent(plant.scientific_name) }}</h3>
                  <p>{{ plant.type_name }}</p>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 生长时期页面 -->
      <div v-else-if="selectedItem && !selectedFeature" class="item-detail">
        <div class="header-section">
          <el-tag type="success" effect="plain" class="plant-tag">{{ getBracketsContent(selectedItem.scientific_name) }}</el-tag>
          <h1 class="title">生长时期</h1>
          <p class="description">观察植物在不同生长阶段的变化</p>
        </div>

        <!-- 生长时期按钮 -->
        <el-row :gutter="20" class="growth-stages-grid">
          <el-col
              v-for="(feature,index) in plantFeatures"
              :key="feature.id"
              :xs="12" :sm="8" :md="6" :lg="4"
          >
            <el-card
                shadow="hover"
                class="stage-card"
                :class="`item-card-${index % 6}`"
                @click="selectFeature(feature)"
            >
              <div class="stage-content">
                <div class="stage-icon">
                  <el-icon :size="40"><Calendar /></el-icon>
                </div>
                <h3>{{ feature.feature_name }}</h3>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 样本列表页面 -->
      <div v-else class="sample-detail">
        <div class="header-section">
          <el-tag type="success" effect="plain" class="feature-tag">{{ selectedFeature.feature_name }}</el-tag>
          <h1 class="title">{{ getBracketsContent(selectedItem.scientific_name) }}</h1>
          <p class="description">查看该生长阶段下的详细样本</p>
        </div>
        <el-row :gutter="20" class="sample-grid">
          <el-col
              v-for="(sample,index) in samples"
              :key="sample.SAMPLE_ID"
              :xs="12" :sm="8" :md="6" :lg="4"
          >
            <el-card
                shadow="hover"
                class="sample-card"
                :class="`item-card-${index % 6}`"
                @click="showSampleDetail(sample)"
            >
              <div class="sample-content">
                <div class="sample-icon">
                  <el-icon :size="40"><Picture /></el-icon>
                </div>
                <h3>{{ sample.SAMPLE_NAME }}</h3>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 样本详情弹窗 -->
      <!-- 样本详情弹窗 - 优化后的template部分 -->
      <el-dialog
          v-if="selectedItem && selectedSample"
          v-model="selectedSample"
          :title="`${getBracketsContent(selectedItem.scientific_name)}——${selectedFeature.feature_name}`"
          width="80%"
          top="5vh"
          custom-class="sample-dialog"
          :close-on-click-modal="false"
      >
        <div class="sample-modal-content">
          <!-- 图片区域 -->
          <div class="sample-image">
            <el-image
                :src="selectedSample.image"
                :alt="selectedSample.SAMPLE_NAME"
                fit="cover"
                class="sample-preview"
                :preview-src-list="[selectedSample.image]"
            />
            <div class="sample-tags">
              <el-tag type="success" effect="plain" size="large">{{ selectedFeature.feature_name }}</el-tag>
            </div>
          </div>

          <!-- 信息区域 -->
          <div class="sample-info">
            <div class="sample-header">
              <h3 class="sample-name">
                <el-icon><Notebook /></el-icon>
                {{ selectedSample.sample_name }}
              </h3>
              <el-rate
                  v-if="selectedSample.rating"
                  v-model="selectedSample.rating"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value} 分"
              />
            </div>

            <el-divider class="custom-divider" />

            <div class="sample-description">
              <h4>
                <el-icon><Document /></el-icon>
                样本描述
              </h4>
              <p>{{ selectedSample.description || '暂无描述' }}</p>
            </div>

            <el-divider class="custom-divider" />

            <div class="sample-details">
              <h4>
                <el-icon><DataAnalysis /></el-icon>
                特征详情
              </h4>
              <div v-if="selectedFeature.feature_id === 1" class="feature-detail">
                <el-descriptions :column="1" border>
                  <el-descriptions-item label="种子质量" label-class-name="detail-label">
                    {{ selectedSample.feature_details?.quality_name || '未知' }}
                  </el-descriptions-item>
                  <el-descriptions-item label="详细描述">
                    {{ selectedSample.feature_details?.description || '暂无描述' }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
              <div v-else-if="selectedFeature.feature_id === 2" class="feature-detail">
                <el-descriptions :column="1" border>
                  <el-descriptions-item label="生长阶段" label-class-name="detail-label">
                    {{ selectedSample.feature_details?.stage_name || '未知' }}
                  </el-descriptions-item>
                  <el-descriptions-item label="详细描述">
                    {{ selectedSample.feature_details?.description || '暂无描述' }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
              <div v-else-if="selectedFeature.feature_id === 3" class="feature-detail">
                <el-descriptions :column="1" border>
                  <el-descriptions-item label="疾病名称" label-class-name="detail-label">
                    {{ selectedSample.feature_details?.disease_name || '未知' }}
                  </el-descriptions-item>
                  <el-descriptions-item label="详细描述">
                    {{ selectedSample.feature_details?.description || '暂无描述' }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
              <div v-else-if="selectedFeature.feature_id === 4" class="feature-detail">
                <el-descriptions :column="1" border>
                  <el-descriptions-item label="成熟度" label-class-name="detail-label">
                    {{ selectedSample.feature_details?.maturity_level || '未知' }}
                  </el-descriptions-item>
                  <el-descriptions-item label="详细描述">
                    {{ selectedSample.feature_details?.description || '暂无描述' }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
          </div>
        </div>

        <template #footer>
          <div class="dialog-footer">
            <el-button @click="closeSampleDetail" plain>
              <el-icon><Close /></el-icon>
              关闭
            </el-button>
          </div>
        </template>
      </el-dialog>
    </el-main>

    <!-- 底部导航栏 -->
    <el-footer class="bottom-nav">
      <el-menu
          mode="horizontal"
          :default-active="activeIndex"
          class="nav-menu"
          @select="handleMenuSelect"
          active-text-color="#4caf50"
          :ellipsis="false"
      >
        <el-menu-item index="/home">
          <template #title>
            <el-icon :size="24"><HomeFilled /></el-icon>
            <span>首页</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/detection">
          <template #title>
            <el-icon :size="24"><Camera /></el-icon>
            <span>识别</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/gallery">
          <template #title>
            <el-icon :size="24"><Notebook /></el-icon>
            <span>图鉴</span>
          </template>
        </el-menu-item>
      </el-menu>
    </el-footer>
  </div>
</template>

<script>
import {
  ArrowLeft,
  Calendar,
  Camera,
  Collection,
  HomeFilled,
  Notebook,
  Grape,
  Picture,
  Document, DataAnalysis, Close
} from '@element-plus/icons-vue'
import axios from 'axios';

export default {
  name: 'GalleryPage',
  components: {
    Close,
    DataAnalysis,
    Document,
    Calendar,
    HomeFilled, Notebook, Camera,
    ArrowLeft,
    Collection,
    Grape,
    Picture
  },
  data() {
    return {
      selectedCategory: null,
      selectedItem: null,
      selectedFeature: null,
      selectedSample: null,
      categories: [],
      plantTypes: [],
      plantFeatures: [],
      loading: false,
      error: null,
      showDetails: false,
      samples: [],
      activeIndex: '/gallery'
    }
  },
  methods: {
    getBracketsContent(text) {
      try {
        if (!text) return '';
        if (typeof text === 'object') {
          console.warn('scientific_name 是对象类型:', text);
          return '';
        }
        const str = String(text).trim();
        const start = str.indexOf('(');
        const end = str.lastIndexOf(')');
        if (start !== -1 && end !== -1 && start < end) {
          return str.slice(start + 1, end);
        }
        return str;
      } catch (error) {
        console.error('处理学名时出错:', error);
        return '';
      }
    },
    async fetchCategories() {
      this.loading = true;
      this.error = null;
      try {
        const token = localStorage.getItem('token');
        if (!token) {
          throw new Error('未登录');
        }

        const response = await axios.get('http://47.120.40.5:5000/api/plants/categories', {
          headers: {
            'Authorization': `${token}`
          }
        });

        if (response.data.success) {
          this.categories = response.data.data;
        } else {
          throw new Error('获取数据失败');
        }
      } catch (err) {
        console.error('获取植物分类失败:', err);
        this.error = err.message;
      } finally {
        this.loading = false;
      }
    },
    async fetchPlantTypes(categoryId) {
      this.loading = true;
      this.error = null;
      try {
        const token = localStorage.getItem('token');
        if (!token) {
          throw new Error('未登录');
        }

        const response = await axios.post(`http://47.120.40.5:5000/api/plants/plantTypes`, {
          category_id: categoryId
        }, {
          headers: {
            'Authorization': `${token}`,
            'Content-Type': 'application/json'
          }
        });

        if (response.data.success) {
          this.plantTypes = response.data.data;
        } else {
          throw new Error('获取数据失败');
        }
      } catch (err) {
        console.error('获取植物种类失败:', err);
        this.error = err.message;
      } finally {
        this.loading = false;
      }
    },
    async fetchPlantFeatures() {
      this.loading = true;
      this.error = null;
      try {
        const token = localStorage.getItem('token');
        if (!token) {
          throw new Error('未登录');
        }

        const response = await axios.get('http://47.120.40.5:5000/api/plants/plantFeatures', {
          headers: {
            'Authorization': `${token}`,
            'Content-Type': 'application/json'
          }
        });

        if (response.data.success) {
          this.plantFeatures = response.data.data;
        } else {
          throw new Error('获取植物特征失败');
        }
      } catch (err) {
        console.error('获取植物特征失败:', err);
        this.error = err.message;
      } finally {
        this.loading = false;
      }
    },
    backToCategories() {
      this.selectedCategory = null;
      this.selectedItem = null;
      this.selectedFeature = null;
      this.plantTypes = [];
    },
    backToCategoryDetail() {
      this.selectedItem = null;
      this.selectedFeature = null;
    },
    backToFeatures() {
      this.selectedFeature = null;
    },
    async selectCategory(category) {
      this.selectedCategory = category;
      this.selectedItem = null;
      this.selectedFeature = null;
      await this.fetchPlantTypes(category.category_id);
    },
    async selectItem(item) {
      this.selectedItem = item;
      this.selectedFeature = null;
      await this.fetchPlantFeatures();
    },
    async selectFeature(feature) {
      this.selectedFeature = feature;
      await this.fetchSamples();
    },
    async fetchSamples() {
      this.loading = true;
      this.error = null;
      try {
        const token = localStorage.getItem('token');
        if (!token) {
          throw new Error('未登录');
        }

        const response = await axios.post('http://47.120.40.5:5000/api/plants/featureSamples', {
          plant_type_id: this.selectedItem.plant_type_id,
          feature_id: this.selectedFeature.feature_id
        }, {
          headers: {
            'Authorization': `${token}`,
            'Content-Type': 'application/json'
          }
        });

        if (response.data.success) {
          this.samples = response.data.data;
        } else {
          throw new Error('获取样本数据失败');
        }
      } catch (err) {
        console.error('获取样本数据失败:', err);
        this.error = err.message;
      } finally {
        this.loading = false;
      }
    },
    async showSampleDetail(sample) {
      this.loading = true;
      this.error = null;
      try {
        const token = localStorage.getItem('token');
        if (!token) {
          throw new Error('未登录');
        }

        const response = await axios.post('http://47.120.40.5:5000/api/plants/sampleDetails', {
          sample_id: sample.SAMPLE_ID
        }, {
          headers: {
            'Authorization': `${token}`,
            'Content-Type': 'application/json'
          }
        });

        if (response.data.success) {
          this.selectedSample = response.data.data;
          if (this.selectedSample.example_image_url && !this.selectedSample.example_image_url.startsWith('data:image')) {
            this.selectedSample.image = `data:image/jpeg;base64,${this.selectedSample.example_image_url}`;
          } else {
            this.selectedSample.image = this.selectedSample.example_image_url;
          }
        } else {
          throw new Error('获取样本详情失败');
        }
      } catch (err) {
        console.error('获取样本详情失败:', err);
        this.error = err.message;
      } finally {
        this.loading = false;
      }
    },
    closeSampleDetail() {
      this.selectedSample = null;
    },
    handleMenuSelect(index) {
      this.$router.push(index);
    }
  },
  created() {
    this.fetchCategories();
  }
}
</script>

<style scoped>
/* 整体布局 */
.gallery-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8faf8;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  position: relative;
  padding-bottom: 60px;
}

/* 顶部导航栏 */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  height: 60px;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.logo-image {
  height: 40px;
  border-radius: 40px;
}

/* 主要内容区域 */
.main-content {
  flex: 1;
  padding: 20px;
  padding-bottom: 80px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* 返回按钮 */
.nav-bar {
  margin-bottom: 24px;
}

.back-btn {
  padding: 8px 16px;
  border-radius: 20px;
  background-color: #f5f7fa;
  color: #4caf50;
  border: 1px solid #e0e0e0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s;
}

.back-btn:hover {
  background-color: #e8f5e9;
  color: #2e7d32;
  border-color: #c8e6c9;
  box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
}

/* 标题区域 */
.header-section {
  text-align: center;
  margin-bottom: 32px;
}

.title {
  font-size: 28px;
  color: #2e7d32;
  margin-bottom: 12px;
  font-weight: 600;
  letter-spacing: 1px;
}

.description {
  font-size: 15px;
  color: #757575;
  margin-bottom: 24px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.category-title {
  text-align: center;
  font-size: 22px;
  color: #2e7d32;
  margin-bottom: 24px;
  font-weight: 500;
  position: relative;
  padding-bottom: 12px;
}

.category-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, rgba(76, 175, 80, 0.2), #4caf50, rgba(76, 175, 80, 0.2));
  border-radius: 3px;
}

/* 标签样式 */
.category-tag,
.plant-tag,
.feature-tag {
  font-size: 16px;
  padding: 6px 16px;
  margin-bottom: 12px;
  border-radius: 16px;
  font-weight: 500;
}

/* 卡片通用样式 */
.category-card,
.item-card,
.stage-card,
.sample-card {
  margin: 10px; /* 增加卡片间距 */
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 12px;
  overflow: hidden;
  height: calc(100% - 20px); /* 减去margin */
  border: none;
  background-color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.category-card:hover,
.item-card:hover,
.stage-card:hover,
.sample-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(76, 175, 80, 0.2);
}

/* 卡片内容样式 */
.category-content,
.plant-content,
.stage-content,
.sample-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  text-align: center;
  height: 100%;
}

/* 分类卡片图标 - 使用不同颜色 */
.category-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: white;
}

/* 分类卡片图标背景颜色 - 比卡片背景略深 */
.category-card-0 .category-icon {
  background-color: #bbdefb; /* 比淡蓝色卡片略深 */
}

.category-card-1 .category-icon {
  background-color: #c8e6c9; /* 比淡绿色卡片略深 */
}

.category-card-2 .category-icon {
  background-color: #f8bbd0; /* 比淡粉色卡片略深 */
}

.category-card-3 .category-icon {
  background-color: #ffecb3; /* 比淡黄色卡片略深 */
}

.category-card-4 .category-icon {
  background-color: #e1bee7; /* 比淡紫色卡片略深 */
}

.category-card-5 .category-icon {
  background-color: #b2ebf2; /* 比淡青色卡片略深 */
}

/* 植物卡片图标背景颜色 */
.item-card-0 .plant-icon {
  background-color: #64b5f6; /* 蓝色 */
}

.item-card-1 .plant-icon {
  background-color: #81c784; /* 绿色 */
}

.item-card-2 .plant-icon {
  background-color: #f06292; /* 粉色 */
}

.item-card-3 .plant-icon {
  background-color: #ffb74d; /* 黄色 */
}

.item-card-4 .plant-icon {
  background-color: #ba68c8; /* 紫色 */
}

.item-card-5 .plant-icon {
  background-color: #4dd0e1; /* 青色 */
}

/* 生长阶段卡片图标背景颜色 */
.item-card-0 .stage-icon {
  background-color: #5c6bc0; /* 深蓝色 */
}

.item-card-1 .stage-icon {
  background-color: #66bb6a; /* 深绿色 */
}

.item-card-2 .stage-icon {
  background-color: #ec407a; /* 深粉色 */
}

.item-card-3 .stage-icon {
  background-color: #ffa726; /* 深黄色 */
}

.item-card-4 .stage-icon {
  background-color: #ab47bc; /* 深紫色 */
}

.item-card-5 .stage-icon {
  background-color: #26c6da; /* 深青色 */
}

/* 样本卡片图标背景颜色 */
.item-card-0 .sample-icon {
  background-color: #3f51b5; /* 更深的蓝色 */
}

.item-card-1 .sample-icon {
  background-color: #4caf50; /* 更深的绿色 */
}

.item-card-2 .sample-icon {
  background-color: #e91e63; /* 更深的粉色 */
}

.item-card-3 .sample-icon {
  background-color: #ff9800; /* 更深的黄色 */
}

.item-card-4 .sample-icon {
  background-color: #9c27b0; /* 更深的紫色 */
}

.item-card-5 .sample-icon {
  background-color: #00bcd4; /* 更深的青色 */
}
/* 植物卡片图标 */
.plant-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: white;
  background-color: #5d8c3e; /* 深绿色 */
}

/* 生长阶段卡片图标 */
.stage-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: white;
  background-color: #8d6e63; /* 棕色 */
}

/* 样本卡片图标 */
.sample-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: white;
  background-color: #6a1b9a; /* 紫色 */
}

.plant-text {
  margin-top: 12px;
}

.plant-text h3 {
  font-size: 16px;
  color: #2e7d32;
  margin-bottom: 6px;
  font-weight: 500;
}

.plant-text p {
  font-size: 14px;
  color: #757575;
  font-style: italic;
}

/* 移除统计信息样式 */
.category-count,
.stage-count {
  display: none;
}

.sample-date {
  font-size: 13px;
  color: #9e9e9e;
  margin-top: 8px;
}

/* 网格布局 - 确保卡片完全分离 */
.category-grid,
.items-grid,
.growth-stages-grid,
.sample-grid {
  display: flex;
  flex-wrap: wrap;
  margin: -10px; /* 补偿卡片间距 */
}

/* 底部导航栏 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  height: 64px;
  background-color: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 1000;
}

.nav-menu {
  display: flex;
  justify-content: space-around;
  border: none;
  height: 100%;
}

.nav-menu :deep(.el-menu-item) {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 64px;
  padding: 0;
  border-bottom: none;
  transition: all 0.3s;
}

.nav-menu :deep(.el-menu-item.is-active) {
  color: #4caf50 !important;
  background-color: #e8f5e9 !important;
}

.nav-menu :deep(.el-menu-item .el-icon) {
  margin-right: 0;
  margin-bottom: 6px;
  font-size: 20px;
}

/* 弹窗样式 */
/* 样本详情弹窗的style部分 */
.sample-dialog {
  border-radius: 16px;
  overflow: hidden;
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  max-width: 900px;
}

.sample-dialog :deep(.el-dialog__header) {
  border-bottom: 1px solid #e8f4ea;
  padding: 16px 24px;
  margin-right: 0;
  background-color: #f8faf8;
}

.sample-dialog :deep(.el-dialog__title) {
  color: #2e7d32;
  font-weight: 600;
  font-size: 18px;
}

.sample-dialog :deep(.el-dialog__body) {
  padding: 20px;
}

.sample-modal-content {
  display: flex;
  gap: 24px;
  padding: 0;
}

.sample-image {
  flex: 1;
  min-width: 300px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sample-preview {
  width: 100%;
  height: 400px;
  border-radius: 12px;
  object-fit: cover;
  transition: transform 0.3s;
  cursor: zoom-in;
}

.sample-preview:hover {
  transform: scale(1.02);
}

.sample-tags {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 8px;
}

.sample-info {
  flex: 1;
  min-width: 300px;
  padding: 0 10px;
}

.sample-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.sample-name {
  font-size: 20px;
  color: #2e7d32;
  margin: 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-divider {
  margin: 16px 0;
  background-color: #e8f4ea;
}

.sample-description h4,
.sample-details h4 {
  font-size: 16px;
  color: #4caf50;
  margin-bottom: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sample-description p,
.sample-details p {
  font-size: 14px;
  color: #616161;
  line-height: 1.8;
  margin-bottom: 8px;
}

.feature-detail {
  margin-top: 12px;
}

.feature-detail :deep(.el-descriptions) {
  width: 100%;
}

.feature-detail :deep(.el-descriptions__label) {
  width: 100px;
  color: #2e7d32;
  font-weight: 500;
}

.feature-detail :deep(.el-descriptions__content) {
  color: #616161;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #e8f4ea;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sample-modal-content {
    flex-direction: column;
  }

  .sample-image,
  .sample-info {
    min-width: 100%;
  }

  .sample-preview {
    height: 250px;
  }

  .sample-dialog {
    width: 90% !important;
  }
}

@media (max-width: 480px) {
  .sample-dialog :deep(.el-dialog__header) {
    padding: 12px 16px;
  }

  .sample-dialog :deep(.el-dialog__body) {
    padding: 10px;
  }

  .sample-name {
    font-size: 18px;
  }

  .sample-description h4,
  .sample-details h4 {
    font-size: 15px;
  }

  .dialog-footer {
    padding: 12px 16px;
  }
}
/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    padding: 16px;
  }

  .sample-modal-content {
    flex-direction: column;
  }

  .sample-image,
  .sample-info {
    min-width: 100%;
  }

  .sample-preview {
    height: 250px;
  }
}

@media (max-width: 480px) {
  .title {
    font-size: 22px;
  }

  .description {
    font-size: 13px;
  }

  .category-title {
    font-size: 18px;
  }

  .category-title::after {
    width: 60px;
  }
}
</style>